<template>
	<div class="zxhfx">
		<div class="xgcart1">
				<router-link to="/cart">
					<p class="op2">
						&#xe601;
						<span v-show="sum>0">{{sum}}</span>
					</p>
				</router-link>
		</div>
		<div v-for="foot in foots" class="xgcart2">
			<div class="zxhfx1">
					<img :src="foot.picUrl">
			</div>
			<div class="zxhfx2">
				<p>{{foot.name}}</p>
				<p></p>
				<p><span>￥{{foot.availablePrice}}</span><span>￥{{foot.price}}</span></p>
				<div class="zxhfx2a">
					<div class="sorzx">
						<p><span>{{foot.commentInfo.commentNum}}</span>条评价</p>
						<p>好评<span>{{foot.commentInfo.goodRate}}%</span></p>
					</div>	

					<p class="op1" @click="addfoot(foot)">&#xe601;</p>
					<transition name="move">
			    		<div class="box" v-show="show">
							<p>
								加入购物车成功
							</p>
						</div>
			    	</transition>

				</div>
			</div>
		</div>
		
	</div>
</template>
<style type="text/css" scoped>
	.box{
		position: fixed;
		top: 40%;
		left: 25%;
		width: 5rem;
		height: 15%;
		z-index: 300;
		text-align: center;
		background: #ff6900;
		opacity: .05;
		display: none;
	}
	.box>p{
		position: absolute;
		font-size: .4rem;
		top: 40%;
		left: 25%;
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 387317 */
	  src: url('//at.alicdn.com/t/font_387317_jctcavw958h93sor.eot');
	  src: url('//at.alicdn.com/t/font_387317_jctcavw958h93sor.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_387317_jctcavw958h93sor.woff') format('woff'),
	  url('//at.alicdn.com/t/font_387317_jctcavw958h93sor.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_387317_jctcavw958h93sor.svg#iconfont') format('svg');
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 387317 */
	  src: url('//at.alicdn.com/t/font_387317_grc20zha9fz85mi.eot');
	  src: url('//at.alicdn.com/t/font_387317_grc20zha9fz85mi.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_387317_grc20zha9fz85mi.woff') format('woff'),
	  url('//at.alicdn.com/t/font_387317_grc20zha9fz85mi.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_387317_grc20zha9fz85mi.svg#iconfont') format('svg');
	}

	.op1{
		font-family: 'iconfont'; 
		color: #ff6900; 
	}
	.op2{
		font-family: 'iconfont';
		z-index: 150;
	}
	.op2>span{
		position: absolute;
		display: inline-block;
		width: .7rem;
		height: .7rem;
		line-height: .7rem;
		top: -30%;
		left: 50%;
		background: #ff6900;
		border-radius: 50%;
	}
	.zxhfx{
		z-index: -1;
		margin-top: 2.6223rem;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow-y: scroll;
		background: #fff;
	}
	.zxhfx1{
		margin-top: .3rem;
		width: 25%;
		margin-left: .4566rem;
	}
	.zxhfx1>img{
		width: 100%;
	}
	.zxhfx2{
		width: 75%;
		margin-top: .2565rem;
		margin-left: .33232rem;
	}
	.xgcart2{
		display: flex;
	}
	.zxhfx2>p:nth-of-type(2){
		margin-top: .4rem;
	}
	.zxhfx2>p:nth-of-type(3)>span:nth-of-type(1){
			font-size: .5rem;
	}
	.zxhfx2>p:nth-of-type(3)>span:nth-of-type(2){
		text-decoration: line-through;
	}
	.zxhfx2>p:nth-of-type(3){
		margin-top: .13434rem;
	}
	.zxhfx2a{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	.zxhfx2a>p{
		margin-right: .3rem;
		font-size: .5rem;
	}
	.sorzx>p:nth-of-type(2){
		margin-left: .2rem;
	}
	.sorzx>p>span{
		color: #ff6900;
	}
	.sorzx{
		display: flex;
	}
	.xgcart1>a>.op2{
		background: #ff6900;
		position: fixed;
		right: 1rem;
		bottom: 3rem;
		width: 1.2rem;
		height: 1.2rem;
		border-radius: 50%;
		text-align: center;
		line-height: 1.2rem;
		color: #fff;
		font-size: .6rem;
		opacity: .8;
	}



	.move-enter,.move-leave-to{
		display: block;
		transform: translate3d(100%, 0, 0)
	}
	.move-enter-active,.move-leave-active{
		display: block;
		animation: atm 1s;
	}
	@keyframes atm{
		0%{
			transform: translate3d(100%, 0, 0)
		}
		90%{
			transform: translate3d(0%, 0, 0)
		}
		100%{
			display: none;
		}
	}

</style>
<script type="text/javascript">
export default {
	data(){
		return {
			foots:[],
			sum:0,
			show:false
		}
	},
	methods:{
		request1(){
			this.$http({
				url:"http://m.laiyifen.com/api/search/searchList?ut=false&companyId=30&shoppingGuideJson=%7B%22attributeJson%22%3A%5B%5D%7D&brandIds=&promotionIds=&coverProvinceIds=&sortType=10&filterType=&priceRange=&pageNo=1&pageSize=20&platformId=3&areaCode=110114&navCategoryIds=1006024900000013",
			}).then(function(res){
				this.foots=res.body.data.productList
				// this.foots1=res.body.data.productList[0,0].promotionInfo[0].promotions[0]
				console.log(this.foots)
				// console.log(this.foots1)
			})
		},
		addfoot(fo){
			this.show=!this.show
			if (fo.num) {
				fo.num+=1
			}else{
				fo.num=1
			};
			this.sum++;
			// console.log(this.sum)
			this.$store.commit("addcart",fo)
			// console.log(this.$store.state.cartFoots)
			console.log(fo)
			// console.log(fo.num)
			// console.log(fo.productId)
		}
		
	},
	mounted(){
		this.request1();
	}
}
</script>